import React from 'react';

import { connect } from 'dva'

import { LegendAbstract } from 'components/Abstract'
import Title from 'components/Title'
import Chart from 'components/Chart'

@connect(({ project }) => ({ ...project }))
class Analysis extends React.Component {
    static defaultProps = {
      echartsConf: [
        {
          key: 'szgc',
          label: '市政工程占比分析',
          chart: {
            type: 'Pie', dataSource: 'AnalysisResource4',
            color: ['#4482ff', '#4ecb73', '#fbd437'],
            columns: {
              name: '', field: [{ name: 'title', value: 'val' }]
            },
            other: { formatType: 'value', unit: '万元' },
          },
          legend: { isShow: false }, // 自定义legend
          server: { type: 'project/queryAnalysis', payload: { type: 4 } },
        },
        {
          key: 'jsgc',
          label: '接水工程建设情况',
          chart: {
            type: 'Pie', dataSource: 'AnalysisResource5',
            color: ['#4482ff', '#4ecb73', '#fbd437', '#975fe5'],
            // other: { radius: ['0%', '60%'] }, // 设置饼图中心
            columns: {
              name: '',
              field: [{ name: 'title', value: 'val' }]
            }
          },
          legend: { isShow: false },
          server: { type: 'project/queryAnalysis', payload: { type: 5 } },
        },
      ]
    }

    constructor(props) {
      super(props);

      let time;
      if ('defaultValue' in props) {
        time = props.defaultValue;
      }
      this.state = {
        time,
      };
    }

    componentDidMount() {
      this.init();
    }

    componentWillReceiveProps(nextProps) {
      if (this.props.defaultValue !== nextProps.defaultValue){
        if (nextProps.defaultValue){
          this.setState({
            time: nextProps.defaultValue
          }, () => {
            this.init()
          })
        }
      }
    }

    init = async () => {
      await this.setDateECharts()
    }

    // 图表
    setDateECharts = () => {
      this.props.echartsConf.map(ele => {
        const { server } = ele;
        // 如果有 server则调用
        if (server) this.queryECharts(server);
      })
    }
    // 处理echarts配置请求
    queryECharts = async (server) => {
      const { time } = this.state;
      let { payload } = server;
      Object.assign(payload, { time })
      Object.assign(server, { payload })
      await this.props.dispatch(server);
    }

    /** 
     * 组件渲染
     */
    RenderLegend = (dataSource, params) => {
      const { options } = params;
      return <LegendAbstract dataSource={dataSource} options={options} />
    }

    render = () => {
      const { props } = this;
      
      let charts = null;
      charts = props.echartsConf.map(ele => {
        const { key, label, chart, legend } = ele;
        const { type: chartType, dataSource, columns, color, other } = chart;
        
        return (<Title key={key} title={label}>
          <Chart
            type={chartType}
            color={color}
            columns={columns}
            dataSource={props[dataSource]}
            other={other}
            style={{ paddingBottom: '20px' }}
          />
          {legend && (
            this.RenderLegend(props[dataSource], legend)
          )}
        </Title>)
      })
      return <>{charts}</>
    }
}

export default Analysis;
